<template>
  <div class="container">
    <el-card class="box-card" style="padding: 20px; margin: 10px">
      <!-- 表单部分 -->
      <QuestionsForm
        :now="now"
        :page="page"
        @questionList="qusList(formRecord)"
        :tableData.sync="tableData"
      />
      <!--  -->
      <el-alert
        :title="`数据一共${page.total}条`"
        type="info"
        show-icon
        style="margin-bottom: 20px"
      >
      </el-alert>
      <!-- 题目表格部分 -->
      <el-table
        :data="tableData"
        style="width: 100%; text-align: center"
        fit
        highlight-current-row
      >
        <el-table-column prop="number" label="试题编号"> </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="city" label="目录"> </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="formatQuesType"
        >
        </el-table-column>
        <el-table-column prop="question" label="题干">
          <template slot-scope="{ row }">
            <!-- v-html可以解析标签 -->
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" :formatter="formatDiff">
        </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column label="操作" width="250px">
          <template slot-scope="{ row }">
            <Dialog
              ref="preview"
              :showDialog.sync="showDialog"
              :questionId="row.id"
              :questionData="questionData"
              :radio="radio"
              :checkBox="checkBox"
            />
            <el-button
              type="primary"
              plain
              icon="el-icon-view"
              circle
              @click="getQuestionDetail(row.id)"
            ></el-button>
            <el-button
              @click="routeJump(row)"
              type="success"
              plain
              icon="el-icon-edit"
              circle
            ></el-button>
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="qusRemove(row.id)"
            ></el-button>
            <el-button
              type="warning"
              plain
              circle
              icon="el-icon-check"
              @click="addChoice(row.id, row.choiceState)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <pageTool
        style="float: right; margin: 20px 0"
        :paginationPagesize="page.pagesize"
        :paginationPage="page.page"
        :total="page.total"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      />
      <!--   :page-sizes="[5, 10, 15, 20]" -->
      <!-- <el-row type="flex" class="row-bg" justify="end">
        <el-pagination
          style="margin-top: 20px; margin-bottom: 15px"
          background
          :page-sizes="[1, 2]"
          :page-size="Number(page.pagesize)"
          layout="prev, pager, next, sizes,jumper"
          :total="Number(total)"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(page.page)"
        >
        </el-pagination>
      </el-row> -->
    </el-card>
  </div>
</template>

<script>
import QuestionsForm from "../components/questions-form";
import pageTool from "@/module-dashboard/components/pageTool.vue";
import {
  list as qusList,
  remove as qusRemove,
  choiceAdd,
} from "@/api/hmmm/questions.js";
import { questionType, difficulty } from "@/api/hmmm/constants.js";
import { parseTimeByString } from "@/filters";
import Dialog from "../components/Hdialog";
import { detail } from "@/api/hmmm/questions";
export default {
  components: { QuestionsForm, pageTool, Dialog },
  data() {
    return {
      now: "base",
      tableData: [],

      // paginationPagesize: 5, //每页显示条目数
      // paginationPage: 1, //当前页数
      // total: 0, //总数

      // 页码
      page: {
        total: 0, //总数
        page: 1,
        pagesize: 10,
      },

      // 弹层数据
      showDialog: false, //弹层显示隐藏
      questionData: {}, //题目信息
      radio: "", // 单选
      checkBox: [], // 多选
    };
  },
  created() {
    this.qusList();
    // this.handleSizeChange();
  },

  methods: {
    // 弹框值实现
    async getQuestionDetail(id) {
      const { data: res } = await detail({ id });
      this.questionData = res;
      //   console.log(this.questionData)
      this.radio = res.options.find((item) => item.isRight === 1).title;
      this.checkBox = res.options
        .filter((item) => item.isRight === 1)
        .map((item) => item.title);

      this.showDialog = true;
    },
    // 获取基础题库列表
    async qusList(params) {
      const { data } = await qusList(this.page);
      // console.log(data);
      this.tableData = data.items;
      this.page.total = data.items.length;
    },
    // // 每页几条数据
    // handleSizeChange(val) {
    //   this.page.pagesize = val;
    //   if (this.page.page === 1) {
    //     this.qusList(this.page);
    //   }
    // },
    // // 进入某一页
    // handleCurrentChange(val) {
    //   this.page.page = val;
    //   this.qusList();
    // },
    // // 换页触发
    pageChange(val) {
      this.page.page = val;
      this.qusList();
      //   this.paginationPage = pageNum;
      //   this.qusList();
    },
    // // 切换条数
    pageSizeChange(val) {
      this.page.pagesize = val;
      if (this.page.page === 1) {
        this.qusList(this.page);
      }
      //   this.paginationPagesize = pageSize;
      //   this.paginationPage = 1;
      //   this.qusList();
    },
    // 格式化题型
    formatQuesType(row, column, cellValue, index) {
      const obj = questionType.find(
        // 让两边数据类型相等 避免字符串和数字类型无法比较
        (item) => item.value * 1 === cellValue * 1
      );
      return obj.label;
    },
    // 格式化难度
    formatDiff(row, column, cellValue, index) {
      const obj = difficulty.find(
        // 让两边数据类型相等 避免字符串和数字类型无法比较
        (item) => item.value * 1 === cellValue * 1
      );
      return obj.label;
    },

    // 删除基础题库
    qusRemove(id) {
      this.$confirm("此操作将永久删除该题目，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log(id);
          //调用接口删除数据
          await qusRemove({ id });
          // 重新渲染页面
          this.qusList();
          this.$message.success("删除成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 加入精选
    addChoice(id) {
      this.$confirm("此操作将该题目加入精选，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      })
        .then(async () => {
          await choiceAdd({ id, choiceState: 1 });
          this.qusList(); //重新渲染页面
          this.$message.success("加入成功");
          // 跳转之精选题库
          this.$router.push(`/questions/choice`);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    routeJump(row){
      this.$router.push({path:'new',query:{id:row.id}})
    }
  },
};
</script>

<style scoped>
.el-form {
  display: flex;
  width: 100%;
}
.addBtn {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
/* 分页 */
.el-pagination__jump {
  margin-left: 0;
}
</style>
